<template>
  <el-row :gutter="20">
    <el-col :span="5">
      <DepartmentIndex ref="departmentIndexRef" @reloadUsersByDepartmentId="reloadUsers" />
    </el-col>
    <el-col :span="19">
      <UserManageIndex
        ref="userManageRef"
        :operatorColumnWidth="200"
        :showPermissionViewButton="false"
        :showUploadPhotoButton="false"
        @changeDepartment="setDepartmentInTree"
      />
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
// 导入管理账户列表
import UserManageIndex from '@/views/page/authority/usermanage/UserManageIndexView.vue';
// 导入部门
import DepartmentIndex from '@/views/page/authority/usermanage/DepartmentIndex.vue';
import type { Department } from '@/types/interface/auth_interface';
import urls from '@/api/request/urls';
import { type TreeData } from '@/types/interface/base_interface';
import Request from '@/api/request/request';
// 定义用户管理组件的ref对象
const userManageRef = ref(); // 定义接口类型
// 根据左侧选中的部门节点加载账户信息
const reloadUsers = (departmentId: string): void => {
  userManageRef.value.setDepartmentIdForQueryUser(departmentId);
};

const departmentIndexRef = ref(); // 定义接口类型
// 根据右侧账户管理查询菜单的部门下拉框选项，同步左侧的树形菜单当前节点
//存在缺陷，当直接重置查询表单时，该事件不会触发
const setDepartmentInTree = (departmentId: string) => {
  departmentIndexRef.value.setCurrentDepartmentInTree(departmentId); // 设置本组件中的tree默认选中的节点与外部值一致
};
</script>

<style scoped></style>
